<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <!-- <template v-slot="xx"> 接收solt标签传递的props xx为一个包含所有props属性的对象 -->
        <template v-slot:qwe="params">
          <span>{{ params }}</span><!-- {games: Array(4), a: '哈哈我是作用域插槽'} -->
          <ul>
            <li v-for="game of params.games" :key="game.id">
              {{ game.name }}
            </li>
          </ul>
        </template>
      </Game>
      <Game>
        <template #qwe="{games}">
          <ol>
            <li v-for="game of games" :key="game.id">{{ game.name }}</li>
          </ol>
        </template>
      </Game>
      <Game>
        <template v-slot:qwe="{games}">
          <h3 v-for="game of games" :key="game.id">{{ game.name }}</h3>
        </template>
      </Game>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
import Game from "./Game.vue";
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.content {
  display: flex;
  justify-content: space-evenly;
}
img,
video {
  width: 100%;
}
li{
  font-size: 18px;
}
</style>
